<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>三角导航菜单动画</title>
		<style type="text/css">
			*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  line-height: 1;
}

html, body {
  font-size: 62.5%;
  height: 100%;
}

body {
  background: -webkit-radial-gradient(circle, #2d4959 0%, #101821 100%);
  background: radial-gradient(circle, #2d4959 0%, #101821 100%);
}

.demo {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -12.9rem;
  margin-top: -28rem;
  width: 25.8rem;
  height: 56rem;
  background: #FFFFFF;
  border-radius: 3.4rem;
  padding: 5rem 0;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
.demo__top {
  position: absolute;
  left: 50%;
  margin-left: -2.2rem;
  top: 2.4rem;
  width: 4.4rem;
  height: 0.5rem;
  background: #0A0D11;
  border-radius: 1rem;
  border: 1px solid #0A0D11;
}
.demo__light {
  position: absolute;
  left: 0;
  top: 18.4rem;
  width: 5rem;
  height: 8rem;
  box-shadow: -2.5rem 0 10rem #0081C8;
  border-radius: 50%;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.demo__light.menu-active {
  top: 14rem;
  width: 8rem;
  height: 27rem;
  box-shadow: -3rem 0 15rem #0081C8;
}
.demo__content {
  z-index: 1;
  position: relative;
  height: 100%;
  background: #103142;
  overflow: hidden;
}
.demo__menu {
  position: absolute;
  left: 0;
  top: 13.5rem;
}
.demo__menu:after {
  z-index: -2;
  content: "";
  position: absolute;
  left: 0;
  top: -6.4rem;
  width: 9.2rem;
  height: 32.2rem;
  -webkit-clip-path: polygon(0 0, 100% 5.3rem, 100% 26.9rem, 0 100%);
          clip-path: polygon(0 0, 100% 5.3rem, 100% 26.9rem, 0 100%);
  pointer-events: none;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  opacity: 0;
}
.demo__menu.menu-active:after {
  z-index: 10;
  opacity: 1;
  -webkit-transition: all 0.6s 0.9s;
  transition: all 0.6s 0.9s;
}
.demo__menu.page-active-1:after {
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0.05) 0%, transparent 10%, rgba(0, 0, 0, 0.45) 100%);
  background: linear-gradient(rgba(0, 0, 0, 0.05) 0%, transparent 10%, rgba(0, 0, 0, 0.45) 100%);
}
.demo__menu.page-active-2:after {
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0.15) 0%, transparent 30%, rgba(0, 0, 0, 0.35) 100%);
  background: linear-gradient(rgba(0, 0, 0, 0.15) 0%, transparent 30%, rgba(0, 0, 0, 0.35) 100%);
}
.demo__menu.page-active-3:after {
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0.25) 0%, transparent 50%, rgba(0, 0, 0, 0.25) 100%);
  background: linear-gradient(rgba(0, 0, 0, 0.25) 0%, transparent 50%, rgba(0, 0, 0, 0.25) 100%);
}
.demo__menu.page-active-4:after {
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0.35) 0%, transparent 70%, rgba(0, 0, 0, 0.15) 100%);
  background: linear-gradient(rgba(0, 0, 0, 0.35) 0%, transparent 70%, rgba(0, 0, 0, 0.15) 100%);
}
.demo__menu.page-active-5:after {
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0.45) 0%, transparent 90%, rgba(0, 0, 0, 0.05) 100%);
  background: linear-gradient(rgba(0, 0, 0, 0.45) 0%, transparent 90%, rgba(0, 0, 0, 0.05) 100%);
}
.demo__menu-item {
  z-index: -1;
  position: absolute;
  left: 0;
  width: 9.2rem;
  height: 10.6rem;
  background-color: #0299DC;
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
          clip-path: polygon(0 0, 100% 50%, 0 100%);
  cursor: pointer;
  overflow: hidden;
  transition: all 0.7s, -webkit-clip-path 0.4s;
  opacity: 0;
}
.demo__menu-item-1 {
  top: -6.4rem;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.menu-active .demo__menu-item-1 {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.demo__menu-item-2 {
  top: -1rem;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.menu-active .demo__menu-item-2 {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.demo__menu-item-3 {
  top: 4.4rem;
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.menu-active .demo__menu-item-3 {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.demo__menu-item-4 {
  top: 9.8rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.menu-active .demo__menu-item-4 {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.demo__menu-item-5 {
  top: 15.2rem;
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
.menu-active .demo__menu-item-5 {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.demo__menu-item:nth-child(even) {
  -webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%);
          clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.demo__menu-item:nth-child(even):after {
  -webkit-transform: translate3d(6rem, 0, 0) rotate(90deg);
          transform: translate3d(6rem, 0, 0) rotate(90deg);
}
.demo__menu-item:nth-child(even) .demo__menu-item-content {
  -webkit-transform: translate3d(6rem, 0, 0);
          transform: translate3d(6rem, 0, 0);
}
.demo__menu-item-1 {
  -webkit-transform: translate(0, -14rem);
          transform: translate(0, -14rem);
}
.demo__menu-item-2 {
  -webkit-transform: translate(2rem, -22rem);
          transform: translate(2rem, -22rem);
}
.demo__menu-item-3 {
  -webkit-transform: translate(-100%, 0);
          transform: translate(-100%, 0);
}
.demo__menu-item-4 {
  -webkit-transform: translate(2rem, 22rem);
          transform: translate(2rem, 22rem);
}
.demo__menu-item-5 {
  -webkit-transform: translate(0, 14rem);
          transform: translate(0, 14rem);
}
.menu-active .demo__menu-item {
  z-index: 2;
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}
.demo__menu-item:after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -0.6rem;
  width: 1.6rem;
  height: 1.2rem;
  background: -webkit-linear-gradient(#fff 0, #fff 0.2rem, transparent 0.2rem, transparent 0.5rem, #fff 0.5rem, #fff 0.7rem, transparent 0.7rem, transparent 1rem, #fff 1rem, #fff 100%);
  background: linear-gradient(#fff 0, #fff 0.2rem, transparent 0.2rem, transparent 0.5rem, #fff 0.5rem, #fff 0.7rem, transparent 0.7rem, transparent 1rem, #fff 1rem, #fff 100%);
  -webkit-transform: translate3d(2rem, 0, 0) rotate(90deg);
          transform: translate3d(2rem, 0, 0) rotate(90deg);
  -webkit-transition: opacity 0.7s, -webkit-transform 0.7s;
  transition: opacity 0.7s, -webkit-transform 0.7s;
  transition: transform 0.7s, opacity 0.7s;
  transition: transform 0.7s, opacity 0.7s, -webkit-transform 0.7s;
  -webkit-transition-delay: inherit;
          transition-delay: inherit;
  opacity: 0;
}
.demo__menu-item-content {
  position: absolute;
  margin-top: -0.8rem;
  left: 0;
  top: 50%;
  min-width: 1.6rem;
  text-align: center;
  font-size: 1.6rem;
  color: #fff;
  -webkit-transition: opacity 0.7s, -webkit-transform 0.7s;
  transition: opacity 0.7s, -webkit-transform 0.7s;
  transition: transform 0.7s, opacity 0.7s;
  transition: transform 0.7s, opacity 0.7s, -webkit-transform 0.7s;
  -webkit-transition-delay: inherit;
          transition-delay: inherit;
  -webkit-transform: translate3d(2rem, 0, 0);
          transform: translate3d(2rem, 0, 0);
}
.m--btn .demo__menu-item-content {
  -webkit-transform: translate3d(1.6rem, 0, 0) rotate(-90deg);
          transform: translate3d(1.6rem, 0, 0) rotate(-90deg);
  opacity: 0;
}
.demo__menu-item.m--btn {
  z-index: 5;
  position: absolute;
  left: 0;
  top: 0;
  width: 6.8rem;
  height: 7.8rem;
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
          clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.demo__menu-item.m--btn:after {
  -webkit-transform: translate3d(1.6rem, 0, 0);
          transform: translate3d(1.6rem, 0, 0);
  opacity: 1;
}
.demo__page {
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 4.8rem 0 0 2.2rem;
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  -webkit-transition: all 0.5s 0.5s ease-in-out, opacity 0.5s 0s ease-in-out;
  transition: all 0.5s 0.5s ease-in-out, opacity 0.5s 0s ease-in-out;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  opacity: 0;
  will-change: transform, opacity, filter;
}
.demo__page.active {
  z-index: 1;
  opacity: 1;
}
.demo__page.menu-active {
  -webkit-transform: scale(0.7) translate3d(30%, 0, 0);
          transform: scale(0.7) translate3d(30%, 0, 0);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -webkit-filter: blur(2px);
          filter: blur(2px);
}
.demo__page-heading {
  margin-bottom: 0.5rem;
  font-size: 2.6rem;
  color: #fff;
}
.demo__page-heading-colored {
  color: #0299DC;
}
.demo__page-subheading {
  font-size: 1rem;
  color: #C9CED6;
  text-transform: uppercase;
}
.demo__page-link {
  display: block;
  font-size: 1.6rem;
  color: #0299DC;
  margin-bottom: 0.5rem;
  text-decoration: none;
}
.demo__page-poly {
  position: absolute;
  left: 0;
  bottom: 0.1rem;
  width: 100%;
  height: 39.4rem;
  background-color: #fff;
  -webkit-clip-path: polygon(0 100%, 13rem 100%, 100% 31.8rem, 100% 0, 0 14.8rem);
          clip-path: polygon(0 100%, 13rem 100%, 100% 31.8rem, 100% 0, 0 14.8rem);
}
.demo__page-poly:after {
  content: "";
  position: absolute;
  left: 0;
  top: 14.8rem;
  width: 100%;
  height: 16.9rem;
  background-repeat: no-repeat;
  background-size: cover;
}
.demo__page-1 .demo__page-poly:after {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/carapp-1.png");
}
.demo__page-2 .demo__page-poly:after {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/carapp-2.jpg");
}
.demo__page-3 .demo__page-poly:after {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/carapp-3.jpg");
}
.demo__page-4 .demo__page-poly:after {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/carapp-4.jpg");
}
.demo__page-5 .demo__page-poly:after {
  background-image: url("//s3-us-west-2.amazonaws.com/s.cdpn.io/142996/profile/profile-512_5.jpg");
  background-size: auto 16rem;
  background-position: center center;
}

		</style>
	</head>
	<body>
		<div class="demo">
  <div class="demo__top"></div>
  <div class="demo__light"></div>
  <div class="demo__content">
    <div class="demo__menu page-active-1">
      <div class="demo__menu-item demo__menu-item-1 m--btn js-menuBtn" data-page="1">
        <span class="demo__menu-item-content">1</span>
      </div>
      <div class="demo__menu-item demo__menu-item-2" data-page="2">
        <span class="demo__menu-item-content">2</span>
      </div>
      <div class="demo__menu-item demo__menu-item-3" data-page="3">
        <span class="demo__menu-item-content">3</span>
      </div>
      <div class="demo__menu-item demo__menu-item-4" data-page="4">
        <span class="demo__menu-item-content">4</span>
      </div>
      <div class="demo__menu-item demo__menu-item-5" data-page="5">
        <span class="demo__menu-item-content">?!</span>
      </div>
    </div>
    <div class="demo__page demo__page-1 active">
      <h2 class="demo__page-heading">
        BMW i<span class="demo__page-heading-colored">8</span>
      </h2>
      <h3 class="demo__page-subheading">Concept</h3>
      <div class="demo__page-poly"></div>
    </div>
    <div class="demo__page demo__page-2">
      <h2 class="demo__page-heading">Page 2</h2>
      <div class="demo__page-poly"></div>
    </div>
    <div class="demo__page demo__page-3">
      <h2 class="demo__page-heading">Page 3</h2>
      <div class="demo__page-poly"></div>
    </div>
    <div class="demo__page demo__page-4">
      <h2 class="demo__page-heading">Page 4</h2>
      <div class="demo__page-poly"></div>
    </div>
    <div class="demo__page demo__page-5">
      <h2 class="demo__page-heading">Links</h2>
      <a class="demo__page-link" href="https://twitter.com/NikolayTalanov" target="_blank">My Twitter</a>
      <a class="demo__page-link" href="http://codepen.io/suez/public/" target="_blank">My Codepen</a>
      <div class="demo__page-poly"></div>
    </div>
  </div>
</div>
<script src="../js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(document).ready(function() {

  var animating = false;

  function menuToggle() {
    $(".demo__page, .demo__menu, .demo__light").toggleClass("menu-active");
    $(".js-menuBtn").toggleClass("m--btn");
    $(document).off("click", ".demo__content", closeNotFocusedMenu);
  };

  function closeNotFocusedMenu(e) {
    if (!$(e.target).closest(".demo__menu").length) {
      menuToggle();
      $(document).off("click", ".demo__content", closeNotFocusedMenu);
    }
  };

  $(document).on("click", ".js-menuBtn", function() {
    if (animating) return;
    menuToggle();
    $(document).on("click", ".demo__content", closeNotFocusedMenu);
  });

  $(document).on("click", ".demo__menu-item:not(.js-menuBtn)", function() {
    animating = true;
    var $this = $(this);
    var page = +$this.data("page");
    $(".js-menuBtn").removeClass("js-menuBtn");
    $(".demo__page.active").removeClass("active");
    $this.addClass("js-menuBtn m--btn");
    $(".demo__page-" + page).addClass("active");
    $(".demo__page, .demo__menu, .demo__light").removeClass("menu-active");
    $(document).off("click", ".demo__content", closeNotFocusedMenu);
    setTimeout(function() {
      $(".demo__menu")[0].className = $(".demo__menu")[0].className.replace(/\bpage-active-.*\b/gi, "");
      $(".demo__menu").addClass("page-active-" + page);
      animating = false;
    }, 1000);
  });

});
</script>
	</body>
</html>
